<%@ taglib prefix="testU" uri="testYou" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="com.mfp.java.testYou.core.servlets.TakeTestServlet" %>
<%@ page import="com.mfp.java.testYou.ui.mvc.AnswerQuestionPage" %>
<%@page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="../global/global.jsp" %>
<%AnswerQuestionPage answerQuestionPage = new AnswerQuestionPage(request, response);%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <jsp:include page="../components/htmlHeader.jsp"></jsp:include>
    <title>ceva</title>

    <script type="text/javascript">
        function submitF(no) {
            document.getElementById("INPansNo").value = no;
            document.getElementById("answerForm").submit();
        }

        function submitFinish() {
            document.getElementById("INPoperation").value = '<%=TakeTestServlet.OPERATION_FINISH_TEST%>';
            document.getElementById("answerForm").submit();
        }
    </script>
</head>
<body class="bgColor textColor">
<jsp:include page="../components/header.jsp"/>
<c:set var="answerQuestion" value="<%=answerQuestionPage%>"/>
<form id="answerForm" action="<%=cPath%><%=response.encodeURL(TakeTestServlet.URL)%>" method="post">
    <input id="INPoperation" type="hidden" name="<%=TakeTestServlet.OPERATION%>"
           value="<%=TakeTestServlet.OPERATION_ANSWER%>"/>
    <input type="hidden" name="<%=TakeTestServlet.INPUT_CURR_Q%>"
           value="<%=answerQuestionPage.getCurrentQuestionNumber()%>">
    <input id="INPansNo" type="hidden" name="<%=TakeTestServlet.INPUT_NEXT_Q%>" value="0">

    <table class="centerTable30marg padTop3 width40">
        <thead>
        <tr>
            <th colspan="2">
                ${answerQuestion.questionText}
            </th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${answerQuestion.questionAnswers}" var="ans">
            <tr>
                <td class="width5">
                    <input id="<%=TakeTestServlet.INPUT_ANSWER%>${ans.id}" type="checkbox"
                           name="<%=TakeTestServlet.INPUT_ANSWER%>${ans.id}" title="${ans.text}"/>
                </td>
                <td>
                    <label for="<%=TakeTestServlet.INPUT_ANSWER%>${ans.id}">${ans.text}</label>
                </td>

            </tr>
        </c:forEach>
        </tbody>
    </table>
</form>
<c:set var="qNo" value="<%=answerQuestionPage.getCurrentQuestionNumber()%>"/>
<c:set var="qLength" value="<%=answerQuestionPage.getNumberOfQuestions()%>"/>
<c:set var="hint" value="<%=answerQuestionPage.getQuestionHint()%>"/>

<table class="centerTable30marg  width40 alignCenter">
    <tbody>
    <tr>
        <td colspan="4">
            <div id="hint" style="display: none;">
                <c:choose>
                    <c:when test="${not empty hint}">
                        ${hint}
                    </c:when>
                    <c:otherwise>
                        <testU:i18n>answerQuestion.noHint</testU:i18n>
                    </c:otherwise>
                </c:choose>
            </div>
        </td>
    </tr>
    <tr>
        <td colspan="4">
            <c:forEach begin="0" end="${qLength-1}" var="number">
                <c:choose>
                    <c:when test="${qNo eq number}">
                        <span style="text-decoration: underline;" onclick="submitF('${number}');">${number+1}</span>
                    </c:when>
                    <c:otherwise>
                        <span onclick="submitF('${number}');">${number+1}</span>
                    </c:otherwise>
                </c:choose>
            </c:forEach>
        </td>
    </tr>
    <tr>
        <td>
            <c:if test="${qNo gt 0}">
            <span onclick="submitF('<%=answerQuestionPage.getCurrentQuestionNumber()-1%>');">
                <testU:i18n>answerQuestion.prev</testU:i18n>
            </span>
            </c:if>
        </td>
        <td>

            <c:if test="<%=answerQuestionPage.isHintsAllowed()%>">
            <span onclick="$('#hint').show();"><testU:i18n>answerQuestion.hint</testU:i18n></span>
            </c:if>
        </td>
        <td>
            <c:if test="${qNo lt qLength - 1}">
                <span onclick="submitF('<%=answerQuestionPage.getCurrentQuestionNumber()+1%>');">
                <testU:i18n>answerQuestion.next</testU:i18n>
                </span>
            </c:if>
        </td>
        <td>
            <c:if test="${qNo eq qLength - 1}">
            <span onclick="submitFinish()">
                <testU:i18n>answerQuestion.finishTest</testU:i18n>
            </span>
            </c:if>
        </td>
    </tr>
    </tbody>
</table>

<script type="text/javascript">
    <c:forEach items="<%=answerQuestionPage.getCorrectIds()%>" var="id">
    var cb = document.getElementById('${id}');
    cb.checked = 'checked';
    </c:forEach>
</script>

</body>
</html>